﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@* 品相测定 *@
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form" action="">

        <div class="layui-form-item">



                    <div class="layui-inline">
                        <label class="layui-form-label">羊只耳号</label>
                        <div class="layui-input-inline layui-input-wrap">
                            <select id="earBugles">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>


            <div class="layui-inline">
                        <select id="variety" lay-filter="testSelect">
                            <option value="">请选择品种</option>
                            <option value="杜泊">杜泊</option>
                            <option value="澳洲白">澳洲白</option>
                            <option value="湖羊">湖羊</option>
                            <option value="黑头杜泊">黑头杜泊</option>
                            <option value="杜湖">杜湖</option>
                            <option value="澳湖">澳湖</option>
                            <option value="澳杜湖">澳杜湖</option>
                            <option value="杜杜湖">杜杜湖</option>
                            <option value="萨杜湖">萨杜湖</option>
                        </select>
                    </div>


                    <div class="layui-inline">
                        <select name="city" id="sheepSex" lay-filter="testSelect">
                            <option value="">请选择性别</option>
                            <option value="公">公</option>
                            <option value="母">母</option>
                        </select>
                    </div>

                    
                   


                    <button type="button" class="layui-btn layui-bg-red" id="searchBtn" onclick="Show()">查询</button>
                    <button type="button" class="layui-btn layui-bg-red" onclick="location.href='/Breesing/AddAppearance'">增加</button>

                
         </div>




        <div>
            <table class="layui-table">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>耳号</td>
                        <td>品种</td>
                        <td>性别</td>
                        <td>当前栋舍</td>
                        <td>当前栏位</td>
                        <td>测定日期</td>
                        <td>测定日龄</td>
                        <td>牙齿咬合</td>
                        <td>毛发</td>
                        <td>色斑</td>
                        <td>蹄颜色</td>
                        <td>最颜色</td>
                        <td>角</td>
                        <td>脂肪分布</td>
                        <td>创建人</td>
                        <td>创建时间</td>
                        <td>修改人</td>
                        <td>修改时间</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <div id="demo-laypage-all"></div>
        </div>
    </form>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script>
        layui.use(['table'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

        });
    </script>
</body>
</html>

<script>
    var form = layui.form;
    var $ = layui.jquery;

    $(function () {
        bangsheng();
    })
    function bangsheng() {

        $.ajax({
            url: "http://localhost:5269/api/SheepArchive/SheepEarBuglesQuery",
            data: JSON.stringify({}),
            type: "post",
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res)
                $.each(res.data, function () {
                    $("#earBugles").append(`<option value="${this.recordId}">${this.recordAuricle}</option>`);
                })
                form.render('select'); // 重新渲染下拉框

            }

        })
    }




    layui.use(function () {
        var laypage = layui.laypage;
        var pageIndex = 1;
        var pageSize = 5;



        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;


        $('#searchBtn').click(function () {
            // var keyword = $('#roleName').val(); // 获取文本框的输入内容
            Show()
        });




        Show();


        //显示列表
        function Show() {
            var sheepNumber = $("#earBugles").val();
            var variety = $("#variety").val(); 
            var sheepSex = null;

            $.post({
                url: 'http://localhost:5269/api/SheepArchive/PhaseDeterminationQuery',
                data: JSON.stringify({ sheepNumber: sheepNumber, variety: variety, sheepSex: sheepSex, pageIndex: pageIndex, pageSize: pageSize }),
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    var count = "";

                    $.each(res.data, function () {
                        if (this.sheepNumber == null) {
                            this.sheepNumber = ""
                        }
                        if (this.variety == null) {
                            this.variety = ""
                        }
                        if (this.sheepSex == null) {
                            this.sheepSex = ""
                        }
                        console.log(res.data);

                        count += `<tr>
                            <td>${this.phaseDeterminationId}</td>
                            <td>${this.sheepNumber}</td>
                            <td>${this.variety}</td>
                            <td>${this.sheepSex}</td>
                            <td>${this.currentHouse}</td>
                            <td>${this.currentField}</td>
                            <td>${this.currentDate}</td>
                            <td>${this.currentDay}</td>
                            <td>${this.occlusionTeeth}</td>
                            <td>${this.sheepHair}</td>
                            <td>${this.sheepSpot}</td>
                            <td>${this.hoofolor}</td>
                            <td>${this.mouthColor}</td>
                            <td>${this.sheepAngle}</td>
                            <td>${this.distributionFat}</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>操作</td>
                        </tr>
                                    `
                    })
                    //pagedCount = res.pagedCount;
                    //pcount = res.totalCount;
                    $("tbody").html(count)
                    // console.log(res.data)

                    //var page = Math.ceil(res.totalCount / 5);  //总页数
                    console.log(996, pageSize, pageIndex, res);
                    // 完整显示
                    laypage.render({
                        elem: 'demo-laypage-all', // 元素 id
                        curr: pageIndex,//当前页
                        pages: res.pagedCount,    //总页数
                        limit: pageSize,//每页几条
                        limits: [5, 10, 15],
                        count: res.totalCount, // 数据总数
                        layout: ['count', 'prev', 'page', 'first', 'last', 'next', 'limit', 'skip'], // 功能布局
                        jump: function (obj, first) {
                            if (!first) {
                                console.log(888, obj);
                                console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); // 得到每页显示的条数
                                pageIndex = obj.curr;
                                pageSize = obj.limit;
                                Show();
                            }
                        }
                    });
                }
            })


        }

    });


</script>
